<!doctype html>
<html>
  <head>
    <title>Complex Table Test</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
      }
      th,
      td {
        border: 1px solid #333;
        padding: 10px;
        text-align: center;
      }
      th {
        background-color: #4caf50;
        color: white;
      }
      .category {
        background-color: #f9f9f9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Quarterly Sales Report</h1>

    <table>
      <thead>
        <tr>
          <th rowspan="2">Region</th>
          <th colspan="4">2024 Sales (in thousands)</th>
          <th rowspan="2">Total</th>
        </tr>
        <tr>
          <th>Q1</th>
          <th>Q2</th>
          <th>Q3</th>
          <th>Q4</th>
        </tr>
      </thead>
      <tbody>
        <tr class="category">
          <td colspan="6">North America</td>
        </tr>
        <tr>
          <td>USA</td>
          <td>$150</td>
          <td>$180</td>
          <td>$165</td>
          <td>$200</td>
          <td>$695</td>
        </tr>
        <tr>
          <td>Canada</td>
          <td>$45</td>
          <td>$52</td>
          <td>$48</td>
          <td>$60</td>
          <td>$205</td>
        </tr>
        <tr class="category">
          <td colspan="6">Europe</td>
        </tr>
        <tr>
          <td>UK</td>
          <td>$80</td>
          <td>$95</td>
          <td>$88</td>
          <td>$110</td>
          <td>$373</td>
        </tr>
        <tr>
          <td>Germany</td>
          <td>$65</td>
          <td>$75</td>
          <td>$70</td>
          <td>$85</td>
          <td>$295</td>
        </tr>
        <tr>
          <td>France</td>
          <td>$40</td>
          <td>$48</td>
          <td>$45</td>
          <td>$55</td>
          <td>$188</td>
        </tr>
        <tr class="category">
          <td><strong>Grand Total</strong></td>
          <td><strong>$380</strong></td>
          <td><strong>$450</strong></td>
          <td><strong>$416</strong></td>
          <td><strong>$510</strong></td>
          <td><strong>$1,756</strong></td>
        </tr>
      </tbody>
    </table>

    <h2>Performance Metrics</h2>
    <table>
      <tr>
        <th>Metric</th>
        <th>Target</th>
        <th>Actual</th>
        <th>Status</th>
      </tr>
      <tr>
        <td>Annual Revenue</td>
        <td>$1,500K</td>
        <td>$1,756K</td>
        <td style="color: green">✓ Exceeded</td>
      </tr>
      <tr>
        <td>Growth Rate</td>
        <td>10%</td>
        <td>17%</td>
        <td style="color: green">✓ Exceeded</td>
      </tr>
    </table>
  </body>
</html>
